// 登陆页
import React, { useState } from 'react';
import { history } from 'umi';
import io from 'socket.io-client';
import styles from './index.less';
import { QrcodeOutlined, ArrowRightOutlined } from '@ant-design/icons';
import qq from '@/assets/images/login/qq.png';
import { message, Popover, Button, Input } from 'antd';
import { login } from '@/api/user';

const Login = () => {
  // const [socket] = useState<any>(
  //   io('http://localhost:3000', { transports: ['websocket'] }),
  // );
  // console.log('socket --- socket',socket);
  const [username, setUserName] = useState('');
  const [password, setPassword] = useState('');
  const renderContent = (
    <div>
      <p>Content</p>
      <p>Content</p>
    </div>
  );

  const handleJumpHome = () => {
    if (!username || !password) {
      message.error('账号或者密码不能为空～');
      return;
    }

    login({ username, password }).then((res: any) => {
      localStorage.setItem('token', res.token);
      history.push('/welcome');
    });
  };

  return (
    <div className={styles.loginPage}>
      <div className={styles.loginPanel}>
        <div className={styles.header}>
          <Popover content={renderContent} trigger="click">
            <QrcodeOutlined style={{ fontSize: 20 }} />
          </Popover>
        </div>

        <div className={styles.avatar}>
          <img src={qq} alt="" />
        </div>
        <div className={styles.inputArea}>
          <div className={styles.inputItem}>
            <input
              type="text"
              onChange={event => {
                setUserName(event.target.value);
              }}
              placeholder="输入用户名"
            />
          </div>
          <div className={styles.inputItem}>
            <Button shape="circle" onClick={handleJumpHome} className={styles.loginBtn} icon={<ArrowRightOutlined />} />
            <Input
              type="password"
              onChange={(event: any) => {
                setPassword(event.target.value);
              }}
              onPressEnter={handleJumpHome}
              placeholder="输入密码"
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default React.memo(Login);
